<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="#">绘本馆管理</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li ><a href="admin-index.html">绘本管理</a></li>
                <li class="active"><a href="#">客户管理</a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

        </div>
    </div>
</nav>

<div class="container well" id="app">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg">
        添加用户
    </button>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        修改用户
    </button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">绘本添加</h4>
                </div>
                <!--模态框-->
                <div class="modal-body">
                    <div class="form-group">
                        <input v-model="customer.id" type="text" class="form-control" placeholder="请输入用户ID">
                    </div>
                    <div class="form-group">
                        <input v-model="customer.phone" type="text" class="form-control" placeholder="请输入新的手机号/邮箱">
                    </div>
                    <div class="form-group">
                        <input v-model="customer.password" type="text" class="form-control" placeholder="请输入新的密码">
                    </div>
                    <div class="form-group">
                        <input v-model="customer.name" type="text" class="form-control" placeholder="请输入新用户姓名">
                    </div>
                    <div class="form-group">
                        <input v-model="customer.address" type="text" class="form-control" placeholder="请输入您新的居住地">
                    </div>
                    <div class="form-group">
                        <input v-model="customer.vip" type="text" class="form-control" placeholder="请输入VIP等级">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="update()">添加</button>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <table class="table">
        <thead>
        <tr>
            <th>用户ID</th>
            <th>手机号</th>
            <th>密码</th>
            <th>姓名</th>
            <th>家庭住址</th>
            <th>VIP等级</th>

        </tr>
        </thead>
        <tbody>
        <template v-for="user in users">
            <tr>
                <td>{{user.id}}</td>
                <td>{{user.phone}}</td>
                <td>{{user.password}}</td>
                <td>{{user.name}}</td>
                <td>{{user.address}}</td>
                <td>{{user.vip}}</td>
                <td><el-button type="danger">删除用户</el-button></td>
            </tr>
        </template>
        </tbody>
    </table>

</div>

<script>
    new Vue(
        {
            el:'#app',
            data(){
                return{
                    users:[],
                    customer:{
                        id:'',
                        phone:null,
                        password:null,
                        name:null,
                        role:'',
                        address:null,
                        balance:null,
                        vip:'',
                        birthday:null,
                        creatby:null,
                        cretatime:null
                    },

                }
            },
            mounted:function () {
                var _this = this;
                axios.get('../api/customer/findAll')
                    .then(function (response) {
                        _this.users = response.data.results;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            methods:{
                update:function (){
                    var _this = this;
                    axios.put('../api/customer/update',_this.customer)
                        .then(function (response) {
                           if (response.data.code==2001){
                               window.location.href="user-manage.html"
                           }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        }
    )
</script>



</body>
</html>